<template>
  <div class="aside">
    <div class="aside-main el-icon-s-operation" @click="fold"></div>
    <div class="aside-nav">
      <router-link to="/search" class="abox" exact>
        <i class="el-icon-search"></i><span>搜索</span>
      </router-link>

      <router-link to="/home" exact>
        <i class="el-icon-view"></i><span>发现音乐</span>
      </router-link>

      <router-link to="/mv" exact>
        <i class="el-icon-video-play"></i><span>MV</span>
      </router-link>

      <router-link to="/friend" exact>
        <i class="el-icon-user"></i><span>朋友</span>
      </router-link>

      <div v-show="this.$store.state.fold">
        <span>我的音乐</span>
      </div>

      <router-link to="/local" exact>
        <i class="el-icon-monitor"></i><span>本地音乐</span>
      </router-link>

      <router-link to="/download" exact>
        <i class="el-icon-download"></i><span>下载管理</span>
      </router-link>

      <router-link to="/lately" exact>
        <i class="el-icon-time"></i><span>最近播放</span>
      </router-link>

      <div v-show="this.$store.state.fold" class="add-singerlist">
        <span>创建的歌单</span>
        <span><i class="el-icon-plus"></i></span>
      </div>

      <router-link to="/love" exact>
        <i class="el-icon-star-off"></i><span>我喜欢的音乐</span>
      </router-link>

    </div>
    <div class="myInfo ellipsis">
      <span class="myInfo-photo" :style="{width: this.$store.state.fold?'50px !important':'45px !important'}">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" width="30">
      </span>
      <span class="myInfo-name ellipsis">未登录</span>
      <i class="el-icon-message" v-show="this.$store.state.fold"></i>
      <i class="el-icon-setting" v-show="this.$store.state.fold"></i>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      fold() {
        this.$store.state.fold = !this.$store.state.fold;
      }
    }
  }
</script>
<style scoped="scoped">
  .aside {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .aside-main {
    width: 45px;
    height: auto;
    line-height: 40px;
    overflow: hidden;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 10px 0px;
  }

  .aside-nav {
    width: 100%;
    height: auto;
  }

  .aside-nav a {
    color: #000;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    cursor: default;
    border-left: 2px solid #F3F3F5;
  }

  .aside-nav a>i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 40px;
    font-size: 16px;
  }

  .aside-nav a>span {
    display: block;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .aside-nav>div {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    margin-top: 15px;
    font-size: 12px;
    color: #999999;
    padding: 0px 15px;
  }

  .aside-nav>.add-singerlist{
    justify-content: space-between;
  }

  .aside-nav>.add-singerlist i{
    font-size: 18px;
    font-weight: normal;
    color: #aaa;
  }

  .aside-nav .router-link-active {
    background-color: #DDDDE1;
    border-left: 2px solid #BC2F2E;
  }

  .myInfo {
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #DDDDE1;
    z-index: 100;
    display: flex;
    align-items: center;
  }

  .myInfo .myInfo-photo {
    width: 50px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .myInfo .myInfo-photo img {
    /* width: 100%;
    display: block; */
  }

  .myInfo .myInfo-name {
    max-width: 70px;
    height: 60px;
    line-height: 60px;
    flex: 1;
    font-size: 12px;
    color: #333;
    display: inline;
    align-items: center;
    /* padding: 0px 0px 0px 10px; */
    overflow: hidden;
  }

  .myInfo i {
    width: 35px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #666;
  }
</style>
